<template>
  <!--分案日期策略-->
  <section class="page role-manage">
    <data-form :model="strategyModel" @onSearch="refreshData" :page="pageService">
      <template slot="inputs">
        <el-form-item label="策略名称" prop="strategyName">
          <el-input v-model.trim="strategyModel.strategyName"></el-input>
        </el-form-item>
        <el-form-item label="策略代码" prop="strategyNo">
          <el-input v-model.trim="strategyModel.strategyNo"></el-input>
        </el-form-item>
        <el-form-item label="策略状态" prop="state">
          <el-select v-model="strategyModel.state" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('CommonState')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="修改人" prop="updateName">
          <el-input v-model.trim="strategyModel.updateName"></el-input>
        </el-form-item>
        <el-form-item label="复核人" prop="applyName">
          <el-input v-model.trim="strategyModel.applyName"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="roleDataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="buttons">
        <el-button @click="handleAdd" v-auth="23300">新增日期策略</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column label="操作" :min-width="$helper.getOperateWidth(2)">
          <template slot-scope="scope">
            <el-button type="text" @click="modifyClick(scope.row)" :disabled="scope.row.applyStatus==='PENDING'?true:false" v-auth="23301">编辑</el-button>
            <el-button type="text" @click="seeLog(scope.row) ">查看</el-button>

            <!-- <el-button type="text" @click="stop(scope.row)" v-if="scope.row.state === 'ALREADY_STOP' ? false : true" :disabled="scope.row.state==='PENDING'?true:false">停用</el-button>
            <el-button type="text" @click="stop(scope.row)" v-else>启用</el-button> -->
          </template>
        </el-table-column>
        <el-table-column prop="strategyNo" label="策略代码" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="strategyName" label="策略名称" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="所选日期" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="!scope.row.editOperationDate.length">-</span>
            <template v-else>
              <span v-for="item of scope.row.editOperationDate" :key="item">
                <span v-if="item==='32号'">-</span>
                <span v-else>{{item}}</span>
              </span>
            </template>

          </template>
        </el-table-column>
        <el-table-column prop="state" label="策略状态" :formatter="(row) => $filter.dictConvert(row.state,'CommonState')" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="updateName" label="修改人" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" :formatter="(row) => $filter.dateTimeFormat(row.updateTime)" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="applyName" label="复核人" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="applyTime" label="复核时间" :formatter="(row) => $filter.dateTimeFormat(row.applyTime)" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="remark" label="注记" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="审批记录" :min-width="$helper.getOperateWidth(1)">
          <template slot-scope="scope">
            <el-button type="text" @click="approvalRecord(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!--新增/修改分案日期策略弹出框-->
    <el-dialog :title="operationType.DEFAULT==='OPERATION_ADD'?'新增分案日期策略':operationType.DEFAULT==='OPERATION_SEE'?'查看': '编辑分案日期策略'" :center="true" :visible.sync="dialog.modify" width="700px" @open="$nextTick(() => $refs['add-division'].reset())" :close-on-press-escape="false" :close-on-click-modal="false">
      <add-division :type="operationType.DEFAULT" :roleData="roleObj" @close="dialog.modify = false" @refreshList="refreshData" ref="add-division"></add-division>
    </el-dialog>
    <!-- 分案策略日志 -->
    <el-dialog title="分案策略修改日志" @close="dialog.log = false" :visible.sync="dialog.log" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="true" width="700px" @open="$nextTick(() => $refs['division-log'].refreshData())">
      <division-log ref="division-log" :modifyData="modifyData" @refreshData="refreshData"></division-log>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Layout, Dependencies, Auth } from '~/core/decorator';
import { DateStrategyService } from '~/services/management-service/date-strategy.service';
import { PageService } from '~/utils/page.service';
import AddDivision from '~/components/strategic-manage/add-division.vue';
import DivisionLog from "~/components/strategic-manage/division-log.vue"
import { OPERATION_TYPE } from "~/config/enum.config";
import { namespace } from 'vuex-class';

const systemModule = namespace('system-manage')

@Auth(2330)
@Layout('workspace')
@Component({
  components: {
    AddDivision,
    DivisionLog
  },
})
export default class DivisionDataStrategy extends Vue {
  @Dependencies(DateStrategyService)
  private dateStrategyService: DateStrategyService;
  @Dependencies(PageService)
  private pageService: PageService;
  @systemModule.Action private updateResource: () => void;

  private strategyModel: any = {
    strategyName: '',
    strategyNo: '',
    state: '',
    applyName: '',
    updateName: '',
  };
  // 页面按钮类型
  private operationType: any = OPERATION_TYPE
  private disabled: boolean = false
  private modifyData: any = {};
  private roleDataSet: any[] = [];
  private editOperationDate: any[] = []
  private roleObj: any = {};
  private dialog: any = {
    modify: false,
    module: false,
    list: false,
    log: false,
  };

  /**
   * 日期策略列表
   */
  public refreshData () {
    this.dateStrategyService.getDateStrategy(this.strategyModel, this.pageService).subscribe(
      (data) => {
        this.formatData(data)
      }
    );
  }
  /**
   * 返回数据处理
   */
  private formatData (data) {
    const dataMap = data.map(v => {
      if (v.operationDate === '') {
        return v.editOperationDate = []
      }
      const item = this.editOperationDate = v.operationDate.split(",")
      const map = item.map(f => {
        if (f.indexOf('号') === -1) { f += '号，' }
        return f
      }).filter(v => v !== null)
      map[map.length - 1] = map[map.length - 1].match(/(\S*)，/)[1]
      return v.editOperationDate = map

    })
    this.roleDataSet = data;
  }
  /**
   * 查看
   */
  private seeLog (row) {
    console.log('seeLog row',row);

    const date = row.operationDate === '32' ? '' : row.operationDate
    this.operationType.DEFAULT = 'OPERATION_SEE'

    if (date !== '') {
      const rowItem = date.split(',').map(f => {
        if (f.indexOf('号') === -1) { f += '号' }
        return f
      })
      row.editOperationDate = rowItem
    } else {
      row.editOperationDate = []
    }


    this.roleObj = { ...row }
    console.log('seeLog this.roleObj', this.roleObj);
    this.dialog.modify = true
  }
  /**
   * 审批记录
   */
  private approvalRecord (row) {
    this.operationType.DEFAULT = 'APPROVAL_LOG'
    this.modifyData = { ...row }
    this.dialog.log = true
  }
  /**
   * 编辑 
   */
  private modifyClick (row) {
    console.log('row', row);
    this.operationType.DEFAULT = 'OPERATION_EDIT'
    const editOperationDate = row.editOperationDate.filter(v => !v.includes('32'))
    this.roleObj = { ...row, editOperationDate }
    this.dialog.modify = true
  }

  private handleAdd () {
    this.roleObj = {}
    this.dialog.modify = true
    this.operationType.DEFAULT = 'OPERATION_ADD'
    console.log('refs', this.$refs['add-division']);
    setTimeout(() => {
      ;(this.$refs['add-division'] as any).setDivisionState('do')

    }, 100);
  }

  /**
   * 停用 
   */
  // private stop (row) {
  //   this.dateStrategyService.stopOrStartDateStrategy({ id: row.id }).subscribe((data) => {
  //     this.refreshData()
  //   })
  // }

  private mounted () {
    this.refreshData();
    this.updateResource()
  }
}
</script>

<style lang="less">
</style>
